<template>
	<view class="container">
		<view class="text">选择要绑定的房屋</view>
		<view class="input-box" @tap="selecttime">
			<input type="text" disabled="true" class="input-btn" :value="value" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
			 placeholder="请选择要绑定的房屋">
			<view class="right-icon">
				<image src="../../../static/images/right.png" class="right-img"></image>
			</view>
		</view>
		<view class="text">家属手机号码</view>
		<view class="box1">
			<input class="inp-box" @input="iptchange" @focus="selectid" v-model="phone" type="number" value="" maxlength="11" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
			 placeholder="请输入绑定家属手机号码" />
			<view class="content" v-if="isdata == '1'">
				<view class="info-icon1">
					<image :src="numlist.avatar" class="info-img1"></image>
				</view>
				<view class="right-box1">
					<view class="info-box1">
						<view class="name1">{{numlist.nickname}}</view>
						<view class="phone">{{numlist.phone}}</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="isdata == '2'">
				<view class="no_user_tip">
					<view class="no-user">
						<image src="../../../static/images/zhuyi.png" mode="" class="zhuyi-icon"></image>
						<view class="no-usertext">该手机号还没有注册用户，无法绑定，可通知家属扫码注册或保存为图片发送给家属进行注册。</view>
					</view>
					<view class="no-usertitle">1.通知家属扫码注册</view>
					<view class="qrcode-box">
						<image :src="numlist.qrcode_url" mode="" class="QRcode-img" @tap="bigimg()"></image>
						<view class="tishi">(点击放大)</view>
					</view>
					
					<view class="no-user">
						<view class="no-usertitle">2.一键分享给家属注册</view>
						<button class="share-img" open-type="share"></button>
					</view>
				</view>
			</view>
		</view>
		<view class="text" v-if="isshow">家属身份</view>
		<view class="myrole" v-if="isshow">
			<evan-radio-group @change="onGroupChange" v-model="color1">
				<view class="evan-radio-show__group-item" @click="onRadioClick(index1)" v-for="(item1,index1) in role_list" :key="item1.value">
					<evan-radio :label="item1.type" ref="listRadio" :preventClick="true" style="font-weight: 700;">{{item1.name}}</evan-radio>
					<view class="role-box" style="margin-top: 0rpx;" v-if='index1==num2'>
						<view class="chose-btn" style="margin-top: 20rpx;" v-for="(items,indexs) in item1.relatives_type_desc" :key="indexs"
						 @tap="selectrelative(indexs,items.relatives_type)" :class="num1 === indexs?'active1':''">{{items.name}}</view>
					</view>
				</view>
			</evan-radio-group>
		</view>
		<view class="text" v-if="datashow">自定义填写项</view>
		<view class="myrole" v-if="datashow">
			<!-- 自定义填写项 -->
			<view class="line-bottom" v-for="(items,indexs) in dataList">
				<view class="card-lists" v-if="items.type == 1">
					<text style="color:red" v-if="items.is_must == 1">*</text>
					<view class="card-name" style="margin-left: 15rpx;">{{items.title}}</view>
					<view class="card-text" style="width: 100%;">
						<input type="text" v-model="dataList[indexs].value" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;"
						 value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;"
						 placeholder="请输入内容" />
					</view>
				</view>
			
				<view class="card-lists" style="display: flex;flex-direction: row;align-items: center;" @tap="selectpicker(indexs)" v-if="items.type == 2">
					<view style="display: flex;flex-direction: row;">
						<text style="color:red;line-height: 75rpx;" v-if="items.is_must == 1">*</text>
						<view class="top-title" style="height: 75rpx;line-height: 75rpx;margin-left: 15rpx;">
							{{items.title}}
						</view>
					</view>
					<view class="right-icon1">
						<view>{{selectText}}</view>
						<image src="../../../static/images/right.png" class="right-img1"></image>
					</view>
					<!-- <view class="switch-box" v-for="(itm,idx) in items.use_field" @tap="switchBtn(indexs,idx,itm)">
						<view class="switch" :class="{ 'switch1':(items['num'] == idx)}">
							<view class="switch-mini" :class="{ 'switch-mini1':(items['num'] == idx)}"></view>
						</view>
						<view class="switch-text">{{itm}}</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<button type="primary" :style="btn_style" class="btn" @click="btnpay">确定绑定</button>
		<view>
			<uni-popups ref="popups" type="bottom" style="width: 100%;">
				<view class="active-box">
					<view class="active-title">- 选择要绑定的房屋 -</view>
					<view class="detail-icon" @tap="closePopup">
						<image src="../../../static/images/guanbi.png" class="detail-img"></image>
					</view>
				</view>
				<view class="popups-list">
					<scroll-view class="scroll-box" scroll-y="true" scroll-top="0" show-scrollbar="true">
						<view class="list-box" :class="num === index?'active':''" @tap="selectRoom(index, item.room_address, item.village_id, item.village_name, item.pigcms_id)"
						 v-for="(item,index) in listdata" :key="index">
							<view class="text1"></view>
							<view class="text2">{{item.room_address}}</view>
						</view>
					</scroll-view>
				</view>
			</uni-popups>
		</view>
		<uni-popups ref="popup" type="center" style="width: 100%;" :maskClick="false">
			<view class="popup-box">
				<view class="popup-text">{{popup_text}}</view>
				<view class="popup-text1">请扫描下方二维码进行注册</view>
				<image :src="numlist.qrcode_url" mode="" class="QRcode-img1"></image>
				<view @click="closePopups" class="popup-btnl">
					<image src="../../../static/images/guanbi.png" class="popup-img2"></image>
				</view>
			</view>
		</uni-popups>
		<w-picker v-if="selectList.length!=0" mode="selector" :defaultVal="['女']" @confirm="ConfirmSex" ref="selector"
		 themeColor="#f00" :selectList="selectList"></w-picker>
	</view>
</template>

<script>
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue"
	import EvanRadio from '../component/evan-radio/evan-radio.vue'
	import EvanRadioGroup from '../component/evan-radio/evan-radio-group.vue'
	import UniIcons from '../../../appComponent/uni/uni-icons/uni-icons2.vue'
	import wPicker from "../component/w-picker/w-picker.vue";
	var common = require('../../../utils/common.js');
	var village_common = require('../../../utils/village/common.js');
	var app = getApp();
	var _this;
	const getbindfamily = () => {
		common.post('HouseApi&a=empty_bind_relatives', {}, data => {
			console.log('++++', data)
			if(data.user_all_village_list_data.length > 0){
				_this.listdata = data.user_all_village_list_data;
				
				if(data.user_all_village_list_data.length == 1){
					_this.village_id = _this.listdata[0].village_id;
					_this.village_name = _this.listdata[0].village_name;
					_this.pigcms_id = _this.listdata[0].pigcms_id;
					_this.value = _this.listdata[0].room_address;
					_this.num = 0;
					_this.setWxShare()
				}
			}else{
				uni.showModal({
					title: '提示',
					content: '您目前没有身份为业主的房屋，无法添加',
					showCancel: false,
					success: function (res) {
						uni.navigateBack();
					}
				})
			}
			_this.role_list = data.role_list;
		});
	};
	const getphoneInfo = () => {
		common.post('HouseApi&a=empty_bind_relatives_user', {
			relatives_user_phone: _this.phone,
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			
			if (data && data.phone) {
				console.log('++++6666666', data)
				_this.numlist = data;
				_this.isdata = '1';
				_this.isshow = true;
				_this.name = data.nickname;
				_this.phone = data.phone;
				_this.dataList = data.dataList;
				if(_this.dataList.length > 0){
					_this.datashow = true;
					var hh = _this.dataList.filter(item => {
						return item.use_field != ''
					})
					console.log("hhhhhhh",hh)
					for (let i in hh[0].use_field) {
						let msg = {};
						msg['label'] = hh[0].use_field[i];
						msg['value'] = Number(i);
						_this.selectList.push(msg)
					}
				}else{
					_this.datashow = false;
				}
				console.log("5555555555555", _this.numlist)
			} else {
				_this.isdata = '2';
				_this.isshow = false;
				_this.datashow = false;
				_this.numlist = data;
			}
		}, _this, data => {
			console.log(data);
			uni.showModal({
				title: '提示',
				content: data.data.errorMsg,
				showCancel: false
			})
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				numlist: {},
				role_list: [],
				dataList:[],
				selectList: [],
				village_id: '',
				village_name: '',
				pigcms_id: '',
				actcolor: '',
				btn_style: '',
				value: '',
				id: 0,
				price: 0,
				time: '',
				money: '',
				starttime: 0,
				endtime: 0,
				phone: '',
				num: -1,
				isdata: '0',
				name: '',
				popup_text: '',
				color1: 'red',
				num2: -1,
				num1: -1,
				type: 0, //我的身份
				relatives_type: 0, // 亲戚身份
				index_key:'',
				isshow: false,
				datashow: false,
				selectText:'',
			}
		},
		onShow() {

		},
		onLoad(options) {
			_this = this;
			// #ifdef H5
				console.log('准备跳小程序页', _this.id);
				common.webToMiniapp(_this.route, options, 'redirect')
			// #endif			
			
			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor + ';';

				getbindfamily()
			});
		},
		methods: {
			selectRoom(index, room_address,village_id, village_name, pigcms_id) {
				_this.value = room_address;
				_this.village_id = village_id;
				_this.pigcms_id = pigcms_id;
				_this.village_name = village_name;
				_this.num = index;
				_this.closePopup()
				
				_this.setWxShare()
			},
			selecttime() {
				_this.openPopup()
			},
			//选择好与不好的
			ConfirmSex(val) {
				console.log("33333333",val)
				var indexs = _this.index_key;
				_this.selectText = val.result;
				_this.dataList[indexs].value = val.result
			},
			selectpicker(indexs){
				_this.index_key = indexs;
				_this.$refs.selector.show()
			},
			selectrelative(indexs, relatives_type) {
				_this.num1 = indexs;
				_this.relatives_type = relatives_type;
			},
			selectid(){
				console.log("3333333",_this.village_id)
				if(_this.village_id == '' && _this.pigcms_id == ''){
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请先选择绑定的房屋'),
						showCancel: false,
						confirmText: common.changeTxt('确定'),
						success: function(res) {
							if (res.confirm) {
								
							}
						}
					});
				}
			},
			onRadioClick(index) {
				console.log("ttttttttt", index)
				_this.num2 = index;
				this.$refs.listRadio[index].select()
			},
			onGroupChange(e) {
				console.log(e)
				_this.type = e;
			},
			openPopup() {
				this.$refs.popups.open()
			},
			closePopup() {
				this.$refs.popups.close();
			},
			closePopups(){
				this.$refs.popup.close();
			},
			iptchange(e) {
				setTimeout(() => {
					if (_this.phone.length > 10) {
						getphoneInfo()
					}else{
						_this.isdata = "0"
					}
				}, 0)
			},
			bigimg(){
				_this.$refs.popup.open()
			},
			//确认提交
			btnpay() {
				console.log("66666666666666", _this.name)
				if(!_this.pigcms_id){
					uni.showModal({
						title:'提示',
						content:"请选择要绑定的房屋",
						showCancel:false
					})
					return false;
				}
				if(!_this.name || _this.name == ""){
					uni.showModal({
						title:'提示',
						content:"请填写有效的家属手机号码",
						showCancel:false
					})
					return false;
				}
				common.post('HouseApi&a=bind_relatives_add', {
					pigcms_id: _this.pigcms_id,
					phone: _this.phone,
					name: _this.name,
					type: _this.type,
					relatives_type: _this.relatives_type, //亲戚的身份 已传
					dataList: _this.dataList,
				}, data => {
					console.log('++++', data)
					_this.listdata = data.user_all_village_list_data;
					uni.navigateTo({
						url: '/pages/village/my/myVillage'
					})
				});
			},
			setWxShare() {
				//#ifdef H5
					let pageLink = `${common.requestDomain}packapp/$(common.wxapp_type)/pages/village_menu/index?village_id=${_this.village_id}`
					pageLink = common.addShareParam(pageLink)
					let shareWxLink = pageLink;
					var shareData = {
						title: "欢迎来到【" + _this.village_name + "】",
						desc: _this.village_name + "推出最新智慧社区平台，邀您一起来体验",
						sendFriendLink: shareWxLink,
						share_img: _this.village_logo
					}
					console.log('shareData', shareData);
					common.setWxShare(shareData)
				//#endif
			},
		},
		onShareAppMessage(res) {
			return {
				title: "欢迎来到【" + _this.village_name + "】",
				path: `/pages/village_menu/index?village_id=${_this.village_id}`
			};
		},
		components: {
			uniPopups,
			EvanRadio,
			EvanRadioGroup,
			UniIcons,
			wPicker,
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.text {
		font-size: 26rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.input-box {
		margin: 15rpx 30rpx 10rpx 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		box-shadow: 0px 2rpx 11rpx 2rpx rgba(227, 227, 227, 0.33);
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.input-btn {
		width: 100%;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.right-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.title {
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #999999;
		text-align: center;
	}

	.text-after {
		font-size: 22rpx;
		font-weight: normal;
		letter-spacing: 0rpx;
		color: #f04517;
	}

	.btn {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0px;
		color: #ffffff;
		background-color: #2681f3;
		border-radius: 44rpx;
		margin: 0rpx 100rpx;
		margin-top: 300rpx;
		border: 0rpx;
	}

	.box1 {
		background: #FFFFFF;
		margin: 0rpx 30rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.inp-box {
		background: #FFFFFF;
		margin: 15rpx;
		padding: 20rpx 30rpx;
	}

	.active-box {
		display: block;
		position: relative;
		overflow-x: hidden;
	}

	/deep/.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.active-title {
		font-size: 34rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0px;
		text-align: center;
		color: #000000;
		width: 100%;
	}

	.detail-icon {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		height: 100rpx;
		width: 100rpx;
	}

	.detail-img {
		width: 50%;
		height: 50%;
		margin-left: 25%;
		margin-top: 25%;
		display: block;
	}

	.popups-list {}

	.scroll-box {
		height: 500rpx;
		padding-top: 30rpx;
	}

	.list-box {
		width: 660rpx;
		background-color: #f8f9fa;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #666666;
		margin: 30rpx auto;
		padding: 25rpx 0rpx 25rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.scroll-box .list-box:first-child {
		margin-top: 0rpx;
	}

	.active {
		width: 660rpx;
		background-color: #2681f3;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #FFFFFF;
		margin: 30rpx auto;
		padding: 25rpx 0rpx 25rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.text1 {
		width: 13rpx;
		height: 13rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 13rpx;
		flex-shrink: 0;
	}

	.text2 {
		margin-left: 15rpx;
		overflow-wrap: break-word;
	}

	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 30rpx;
		padding: 15rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #F1F1F1;
	}

	.info-icon1 {
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
	}

	.info-img1 {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 80rpx;
	}

	.right-box1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-left: 15rpx;
	}

	.info-box1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.name1 {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 70rpx;
		letter-spacing: 0rpx;
		color: #454545;
	}

	.phone {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 30rpx;
		letter-spacing: 0rpx;
	}
	.no-user {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}
	.zhuyi-icon {
		width: 20rpx;
		height: 20rpx;
		flex-shrink: 0;
		padding-top: 18rpx;
	}
	.no-usertext {
		font-size: 22rpx;
		color: rgb(124, 124, 124);
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
	.no-usertitle {
		font-size: 22rpx;
		color: rgb(124, 124, 124);
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.qrcode-box {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.QRcode-img {
		width: 150rpx;
		height: 150rpx;
	}
	.tishi {
		font-size: 20rpx;
		color: rgb(124, 124, 124);
	}
	.share-img {
		width: 90rpx;
		height: 40rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
		background: url(../../../static/images/share.png) no-repeat;
		background-size: 100%;
	}
	.popup-box {
		width: 600rpx;
		height: 650rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-text {
		text-align: center;
		font-weight:700;
		margin-top: 30rpx;
	}
	.popup-text1 {
		margin-top: 30rpx;
	}
	.QRcode-img1 {
		margin-top: 50rpx;
		width: 400rpx;
		height: 400rpx;
	}
	.popup-btnl {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		border-radius: 58rpx;
		font-size: 26rpx;
		background-color: #ffffff;
		padding: 16rpx;
	}
	
	.popup-img2 {
		width: 100%;
		height: 100%;
	}
	
	.myrole {
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		margin: 0rpx 30rpx;
		border-radius: 20rpx;
	}
	.role-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}
	
	.role-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10rpx;
		flex-wrap: wrap;
	}
	
	.chose-btn {
		width: 155rpx;
		height: 60rpx;
		background-color: #f4f4f4;
		border: solid 3rpx #f4f4f4;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		text-align: center;
		margin-left: 54rpx;
	}
	
	.chose-btn1 {
		width: 155rpx;
		height: 60rpx;
		background-color: #f4f4f4;
		border: solid 3rpx #f4f4f4;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		text-align: center;
		margin-left: 54rpx;
		margin-top: 20rpx;
	}
	
	.active1 {
		width: 155rpx;
		height: 60rpx;
		background-color: #ecf4ff;
		border-radius: 10rpx;
		border: solid 3rpx #2681f3;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #2681f3;
		text-align: center;
	}
	.evan-radio-show__group-item {
		padding: 20rpx 0rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}
	
	.evan-radio-show__group-item:last-child {
		border-bottom: 0rpx solid #F1F1F1;
	}
	/* .card-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		border-bottom: 2rpx solid #F1F1F1;
	} */
	.card-lists {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0rpx;
		
	}
	.line-bottom {
		border-bottom: 2rpx solid #F1F1F1;
	}
	.line-bottom:last-child {
		border-bottom: 0rpx solid #F1F1F1;
	}
	
	.card-name {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 75rpx;
		letter-spacing: 0rpx;
		color: #858484;
		flex-shrink: 0;
	}
	
	.top-title {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #858484;
		flex-shrink: 0;
	}
	.right-icon {
		width: 30rpx;
		height: 30rpx;
		align-items: center;
	}
	.right-icon1 {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.right-img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.right-img1{
		width: 30rpx;
		height: 30rpx;
		display: block;
	}
</style>
